<template>
	<view class="evaluate">
		<view class="evaluate-content">
			<view class="reward-top">
				<text class="money">选择</text>
				<view class="tabs">
					<view class="tab" :class="type===0?'active':''" @click="handleClick(0)">
						好评
					</view>
					<view class="tab" :class="type===1?'active':''" @click="handleClick(1)">
						差评
					</view>
				</view>
			</view>
			<view class="evaluate-item">
				<text>{{type===0?'好评':'差评'}}：</text>
				<view class="evaluate-icon">
					<view v-for="(item,index) of seleData" :key="item.index">
						<text class="iconfont icon-evaluate" @click="handleSelect(item.index)"
							:style="{'color':item.show?'#000':'#999'}"></text>
					</view>
				</view>
				<text class="evaluate-num">{{type===0?"+":"-"}} {{fraction}}</text>
			</view>
			<view class="evaluate-input">
				<textarea :disabled="iseEvaluate" type="text" maxlength="60" v-model="content" @input="input" placeholder="我有话说..." />
				<text class="evaluate-input-num">{{num}}/60</text>
			</view>
			<view class="sub-btn" v-if="!iseEvaluate">
				<button :disabled="iseEvaluate" type="default" @click="submit()">提交</button>
			</view>
		</view>
		<block-title :title="'全部评价'"></block-title>
		<view class="lists">
			<view class="list" v-for="(item,index) of data" :key="index">
				<view class="list-top">
					<view class="user">
						<image :src="item.avatar ?  item.avatar : require('../../../static/images/avatar.png')" mode=""></image>
						<text>{{item.username}}</text>
					</view>
					<view class="list-evaluate-num">
						<text>{{!item.type ? '+':'-'}}{{item.fraction}}</text>
					</view>
				</view>
				<view class="list-content">
					<text>{{item.content}}</text>
				</view>
				<view class="list-time">
					<text>{{formatDate(item.create_time*1000)}}</text>
				</view>
			</view>
			<block-loading :status="status" :len="data.length"></block-loading>
		</view>
	</view>
</template>

<script>
	import BlockTitle from "@/components/BlockTitle/BlockTitle.vue"
	import {
		evaluate,
		getEvaluate,
		getEvaluateLists
	} from "@/api/reward.js"
	import {mapState} from "vuex"
	import {formatDate} from "@/utils/util.js"
	export default {
		name: "evaluate",
		components: {
			BlockTitle
		},
		data() {
			return {
				seleData: [{
						index: 1,
						show: false
					},
					{
						index: 2,
						show: false
					},
					{
						index: 3,
						show: false
					},
					{
						index: 4,
						show: false
					},
					{
						index: 5,
						show: false
					}
				],
				iseEvaluate: false,
				type: 0,
				id: '',
				fraction: 0,
				content: "",
				num:0,
				data:[],
				page:1,
				status:"nomal"
			}
		},
		computed: {
			...mapState(['userInfo']),
		},
		onLoad(option) {
			if (option) {
				this.id = option.id;
			}
			this.getRewardEvaluate();
			this.getData();
		},
		onReachBottom(){
			this.getData()
		},
		methods: {
			formatDate(val){
				return formatDate(val)
			},
			input(val){
				this.num = val.detail.cursor;
			},
			//选择星星
			handleSelect(val) {
				if (this.iseEvaluate) return;
				this.fraction = val;
				this.seleData.forEach((item) => {
					if (item.index <= val) {
						item.show = true
					} else {
						item.show = false
					}
				})
			},
			//获取悬赏状态
			async getRewardEvaluate(type) {
				let res = await getEvaluate({
					id: this.id
				})
				if (res.code === 1 && res.data.length > 0) {
					let data = res.data[0]
					if(type){
						data.avatar = this.userInfo.avatar
						data.username = this.userInfo.username
						this.data.unshift(data);
						if(this.data.length===1){
							this.status = "nomore"
						}
					}
					this.iseEvaluate = true;
					this.type = data.type
					this.fraction = data.fraction
					this.content = data.content
					this.num = data.content.length
					this.seleData.forEach((item) => {
						if (item.index <= data.fraction) {
							item.show = true
						} else {
							item.show = false
						}
					})
					return;
				}
				this.iseEvaluate = false;
			},
			//切换评价类型
			handleClick(type) {
				if (this.iseEvaluate) return;
				this.type = type;
				this.fraction = 0;
				this.seleData.forEach((item) => {
					item.show = false
				})
			},
			//提交悬赏
			async submit() {
				if (this.fraction === 0) {
					this.$msg("您还未评分")
					return;
				}
				let data = {
					id: this.id,
					type: this.type,
					fraction: this.fraction,
					content: this.content
				}
				let res = await evaluate(data);
				if (res.code === 1) {
					this.getRewardEvaluate(1);
				}
				this.$msg(res.msg)
			},
			async getData(){
				let res = await getEvaluateLists({id:this.id,page:this.page,size:20});
				if(this.page===1&&res.data.length === 0){
					this.status = "nodata"
					return
				}
				if(this.page===1&&res.data.length > 0 && res.data.length < 20){
					this.status = "nomore"
				}
				if(res.data.length === 0){
					this.status = "nomore"
					return;
				}
				this.page++;
				this.data = this.data.concat(res.data);
			},
		}
	}
</script>

<style scoped lang="less" src="./evaluate.less">
</style>
